<template>
  <div class="box">
    <h3>专业列表</h3>
    <!--为echarts准备一个具备大小的容器dom-->
    <div id="main1" style=" height: 400px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions } = createNamespacedHelpers("subject");
export default {
  name: "",
  data() {
    return {
      charts: "",
      subjectName: [],
      subjectNum: []
    };
  },
  methods: {
    drawPie(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        xAxis: {
          type: 'category',
          data: this.subjectName
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: this.subjectNum,
          type: 'bar'
        }]
      });
    },
    ...mapActions(['getSubject']),
    handleSubject() {
      this.subjects.forEach(v => {
        this.subjectName.push(v.name)
        this.subjectNum.push(v.students.length)
      });

    }
  },
  computed: {
    ...mapState(['subjects'])
  },
  created() {
    this.getSubject();
  },
  watch: {
    subjects() {
      this.handleSubject()
      this.drawPie("main1");
    }
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.box {
  background-color: #fff;
  padding: 10px;
  /* width: 500px; */
  /* height: 400px; */
}
</style>